<template>
  <div>
    <p>vue3中的生命周期</p>
    <p @click="sum++">{{ sum }}</p>
  </div>
</template>

<script>
import { onBeforeMount, onUpdated, onBeforeUnmount, onUnmounted } from "vue";
export default {
  name: "",
  props: [""],
  data() {
    return {
      sum: 0,
    };
  },
  //   beforeCreate() {},
  //   created() {
  //     console.log("created");
  //   },
  //   mounted() {
  //     console.log("mounted");
  //   },
  //   updated() {
  //     console.log("updated");
  //   },
  //   beforeUnmount() {
  //     console.log("beforeUnmount");
  //   },
  //   unmounted() {
  //     console.log("unmounted");
  //   },

  setup() {
    onBeforeMount(() => {
      console.log("onBeforeMount");
    });
    onUpdated(() => {
      console.log("onUpdated");
    });
    onUnmounted(() => {
      console.log("onUnmounted");
    });
  },
};
</script>
<style scoped>
</style>